<template>
  <div>
    <div id="container1" />
  </div>
</template>

<script>
import { DualAxes } from "@antv/g2plot";
export default {
  props: ["device"],
  data() {
    return {
      value: "",
      activeName: "1",
      data: [],
      date: {},
      dualAxes: "",
      bpalarm: "",
      pageNum: 1,
    };
  },
  mounted() {
    this.$bus.$on("date", (item) => {
      this.date = item;
      this.getData();
    });
  },
  methods: {
    // 请求数据
    getData() {
      this.$http
        .get("/v1/bpdevicePropHistoryLog/list", {
          params: {
            deviceName: this.device.deviceName,
            startDate: this.date.startDate,
            endDate: this.date.endDate,
          },
        })
        .then((res) => {
          this.data = res.data; // 定义图表数据

          if (this.dualAxes) {
            this.dualAxes.update({
              // 标注，阈值的标注
              annotations: {
                currentUpbp: [
                  {
                    type: "text",
                    position: ["min", this.device.upbpThreshold],
                    content: this.device.upbpThreshold + "mmHg",
                    offsetY: -4,
                    style: {
                      textBaseline: "bottom",
                    },
                  },
                  {
                    type: "line",
                    start: ["min", this.device.bpThreshold],
                    end: ["max", this.device.bpThreshold],
                    style: {
                      stroke: "#F4664A",
                      lineDash: [2, 2],
                    },
                  },
                  {
                    type: "text",
                    position: ["min", this.device.bpThreshold],
                    content: this.device.bpThreshold + "mmHg",
                    offsetY: -4,
                    style: {
                      textBaseline: "bottom",
                    },
                  },
                  {
                    type: "line",
                    start: ["min", this.device.upbpThreshold],
                    end: ["max", this.device.upbpThreshold],
                    style: {
                      stroke: "#F4664A",
                      lineDash: [2, 2],
                    },
                  },
                  {
                    type: "text",
                    position: ["min", this.device.dnbpThreshold],
                    content: this.device.dnbpThreshold + "mmHg",
                    offsetY: -4,
                    style: {
                      textBaseline: "bottom",
                    },
                  },
                  {
                    type: "line",
                    start: ["min", this.device.dnbpThreshold],
                    end: ["max", this.device.dnbpThreshold],
                    style: {
                      stroke: "#F4664A",
                      lineDash: [2, 2],
                    },
                  },
                ],
              },
            });
            this.dualAxes.changeData([this.data, this.data]);
          } else {
            this.dualAxes = new DualAxes("container1", {
              data: [this.data, this.data],
              xField: "gmtCreate",
              yField: ["currentUpbp", "currentDnbp"],

              meta: {
                currentUpbp: {
                  alias: "上压",
                },
                currentDnbp: {
                  alias: "下压",
                },
              },
              yAxis: {
                currentUpbp: {
                  min: 0,
                  max: 160,
                },
                currentDnbp: {
                  min: 0,
                  max: 160,
                },
              },
              // 标注，温度阈值的标注
              annotations: {
                currentUpbp: [
                  {
                    type: "text",
                    position: ["min", this.device.upbpThreshold],
                    content: this.device.upbpThreshold + "mmHg",
                    offsetY: -4,
                    style: {
                      textBaseline: "bottom",
                    },
                  },
                  {
                    type: "line",
                    start: ["min", this.device.bpThreshold],
                    end: ["max", this.device.bpThreshold],
                    style: {
                      stroke: "#F4664A",
                      lineDash: [2, 2],
                    },
                  },
                  {
                    type: "text",
                    position: ["min", this.device.bpThreshold],
                    content: this.device.bpThreshold + "mmHg",
                    offsetY: -4,
                    style: {
                      textBaseline: "bottom",
                    },
                  },
                  {
                    type: "line",
                    start: ["min", this.device.upbpThreshold],
                    end: ["max", this.device.upbpThreshold],
                    style: {
                      stroke: "#F4664A",
                      lineDash: [2, 2],
                    },
                  },
                  {
                    type: "text",
                    position: ["min", this.device.dnbpThreshold],
                    content: this.device.dnbpThreshold + "mmHg",
                    offsetY: -4,
                    style: {
                      textBaseline: "bottom",
                    },
                  },
                  {
                    type: "line",
                    start: ["min", this.device.dnbpThreshold],
                    end: ["max", this.device.dnbpThreshold],
                    style: {
                      stroke: "#F4664A",
                      lineDash: [2, 2],
                    },
                  },
                ],
              },
            });
            this.dualAxes.render();
          }
        });
    },
  },
  watch: {
    device(newValue, oldValue) {
      this.getData();
    },
  },
};
</script>

<style scoped>
.detail-data {
  padding: 20px;
}
.title {
  display: flex;
  justify-content: flex-start;
}
.label {
  line-height: 36px;
  margin-right: 20px;
}
.search-btn {
  margin: 0 20px;
}
</style>